<template>
  <div class="bgfff">
    <a-list size="small">
      <a-list-item>
        <div class="flex">
          <div class="w-80n">域名</div>
          <div class="w-50n mr-m">云厂商</div>
          <div class="w-30n mr-20">资产类型</div>
          <div class="w-30n">申请SSL</div>
          <div class="w-50n">最后同步云</div>
          <div class="w-30n">云证书过期</div>
          <div class="w-30n">新证书过期</div>
        </div>
      </a-list-item>
      <a-list-item v-for="(record, index) in props?.domains ?? []" :key="index">
        <div class="flex flex-a-c">
          <div class="w-80n">
            <span class="text-success" type="text"> {{ record.domain }}</span>
          </div>
          <a-select
            class="w-50n mr-m"
            placeholder="选择云厂商"
            v-model="record.cloudId"
            @change="handleValueChange($event, 'cloudId', record)"
          >
            <a-option :value="0"> 未设置 </a-option>
            <a-option v-for="item in cloudList" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-option>
          </a-select>
          <a-select
            class="w-30n mr-20"
            placeholder="选择资产类型"
            v-model="record.assetType"
            @change="handleValueChange($event, 'assetType', record)"
          >
            <a-option :value="0"> 未设置 </a-option>
            <a-option :value="1"> dcdn </a-option>
            <a-option :value="2"> cdn </a-option>
          </a-select>
          <div class="w-30n">
            <span :class="record.applySsl == 1 ? 'text-success' : 'text-red'">
              {{ record.applySsl == 1 ? '已申请' : '未申请' }}
            </span>
          </div>
          <div class="w-50n">
            <span class="text-success" type="text">
              {{ record.syncTime || '--------' }}
            </span>
          </div>
          <div class="w-30n">
            <span class="text-success" type="text">
              {{ record.cloudSslDate || '--------' }}
            </span>
          </div>
          <div class="w-30n">
            <span class="text-success">
              {{ record.newSslDate || '--------' }}
            </span>
          </div>
        </div>
      </a-list-item>
    </a-list>
  </div>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import { cloudAccountList, domainBindCloud } from '@/apis'
const props = defineProps(['domains'])
const cloudList = ref([])

const getData = async () => {
  const res = await cloudAccountList({ page: 1, size: 50 })
  cloudList.value = res.data.data
}

getData()

const handleValueChange = async (value, str, record) => {
  await domainBindCloud({ id: record.id, assetType: record.assetType, cloudId: record.assetType, [str]: value })
  Message.success('修改成功')
}
</script>
<style scoped>
.text-success {
  color: rgb(var(--success-6));
}
.text-red {
  color: red;
}
</style>
